<template>
	<view>
		<!-- 导航栏 -->
		<uni-nav-bar  left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" rightText="新增"  title="机器采购"  @clickLeft="back" @clickRight="addBtn" :fixed="true" backgroundColor="#3286ed" color="#fff"/>
		<!-- 搜索框 -->
		<view>
			<u-search  v-if="searchShow===true" style="height;40px;background-color: #fff;padding: 10px;" @clear="clearFn" :clearabled="true" showAction @custom="customFn" @search="inputSearchBtn" v-model.enter="queryData.warehousingNo" height='30' placeholder="请输入机器编码" shape="square" actionText='取消'></u-search>
		    	<!-- 搜索历史记录 -->
		    	<view  v-if="searchShow===true && historyList.length && close1==true" >
		    		<u-cell title="搜索历史" style="background-color: #fff;margin-top: 3px;" >
		    				  <template #right-icon>
		    					  <uni-icons type="trash" @click="delFn" size="20"></uni-icons>
		    				  </template>
		    		</u-cell>
		    		<view class="history">
		    			<span v-for="(item,index) in historyList" :key="index" >
		    				<u-tag :text="item" borderColor="#eee" color="#eee" plain size="mini" closable @click="historyBtn(item,index)"   @close="closeFn( item,index)"></u-tag>
		    			</span>
		    		</view>
		    	</view>
				
		</view>
		<!-- 筛选功能 -->
		<view v-if="searchShow==false" style="position: fixed;z-index: 100;width:100%;">
			<uni-row class="demo-uni-row">
				<uni-col :span="10">
					<zb-dropdown-menu  style="width: 100%" z-index="12">
					  <zb-dropdown-item   v-model="queryData.receiptType"  :options="option"  @change="changeFn"></zb-dropdown-item>
					</zb-dropdown-menu>
				</uni-col>
				<uni-col :span="1">
					<view class="title"  style="color:#c3c3c3">|</view>
				</uni-col>
				<uni-col :span="6">
					<view class="title"  @click="show=true">筛选</view>
				</uni-col>
				<uni-col :span="1">
					<view class="title"  style="color:#c3c3c3">|</view>
				</uni-col>
				<uni-col :span="6">
					<view class="title">
						<uni-icons type="search" size="24" color="#c3c3c3" @click="searchShowBtn"></uni-icons>
					</view>
				</uni-col>
			</uni-row>
		</view>
		<view v-if="searchShow==false" style="width:100%;height: 88rpx;display: block;margin-bottom: 10px;"></view>
		<!--列表  -->
		<u-swipe-action :autoClose='true'>
			<view style="margin-top: 5px;" v-for="(item,index) in list " :key="item.id" @click="detailsBtn(item)">
				<u-swipe-action-item  :disabled="disabledShow" @click="delBtn" :name="item.id" :options="options1" >
					 <view  class="receiptorder">
						 <view class="title">
						 	<view class="title-left">入库编号:{{item.warehousingNo}}</view>
						 	<view class="title-right" v-if="item.orderStatus==1">待入库</view>
						 	<view class="title-right" v-if="item.orderStatus==2">已入库</view>
						 </view>
						 <view class="desc">
						 	<view>入库时间:{{item.warehousingTime}}</view>
						 	<view>入库类型:{{item.receiptType}}</view>
						 	<view>入库仓库:{{item.warehousingWarehouseName}}</view>
						 	<view>责任人名称:{{item.chargePersonName}}</view>
						 </view>
					 </view>
				</u-swipe-action-item>
			</view>
	    </u-swipe-action>
		<view v-if="list.length ==0 && searchShow==false" class="BGC"></view>
		<u-popup class="popBox" :show="show"  @close="closeBtn" customStyle="margin-top:44px;min-width:300px;" overlayStyle="margin-top:44px"  mode="right"  :closeOnClickOverlay="true" >
		      <u-cell>
				  <template #title>
					  <view>筛选</view>
				  </template>
			  </u-cell>
			  <u-cell>
				  <template #title>
					  <view>入库时间</view>
				  </template>
				  <template #value>
					 <view  @click="warehouseShow=true">
						 <view v-if="queryData.warehousingTime">{{queryData.warehousingTime}}</view>
						 <view v-else style="font-size: 13px;">请选择</view>
					 </view>
				  </template>
			  </u-cell>
			  <view class="button">
				 <view style="display: flex;justify-content: space-evenly;">
					 <view class="bit" style="border-right: solid 1px #c3c3c3;">重置</view>
					 <view class="bit" @click="BtnOk">确认</view>
				 </view>
			  </view>
			  
		</u-popup>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 入库时间-->
		<u-datetime-picker @close="close" @confirm="confirmFn"  :show="warehouseShow"   v-model="warehouseTime"   mode="date"></u-datetime-picker>
	</view>
	
</template>

<script>
	import {listOrder,delOrder} from "@/api/receiptorder.js"
	import {getDicts} from '@/api/dictionary/index.js'
	export default {
		data(){
			return{
				list:[],
				disabledShow:true,//右滑删除得
				show:false,
				warehouseShow:false,
				searchShow:false,
				close1:false,
				permissions:[],//按钮权限
				options1:[
					{text:'删除'}
				],
				receiptTypeOption:[],//入库类型
				option:[
					{text:'入库类型',value:''}
				],
				queryData:{
					receiptType:'',
					warehousingTime:'',
					warehousingNo:''
				},
				warehouseTime:'',
				historyList:[]
			}
		},
		onLoad(){
			this.permissions=this.$store.getters.permissions
			this.initData()
			
			// 控制删除按钮权限出现
			if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:receiptOorder:delete')){
			     this.disabledShow=false
			}
			this.getReceiptType()
			this.warehouseTime=new Date().getTime()
		},
		
		methods:{
			back(){
				uni.switchTab({
					url:"/pages/index"
				})
			},
			async initData(){
			 const res=  await	listOrder(this.queryData)
			 // console.log(res);
			 // this.list=res.rows
			 res.rows.forEach(item=>{
				 item.receiptType=this.getVaule(this.receiptTypeOption,item.receiptType)
			 })
			 this.list=res.rows
			},
			// 点击搜索
			searchShowBtn(){
				this.searchShow=true
				this.list=[]
			},
			clearFn(){
				this.close1=true
				this.queryData.warehousingNo=''
				this.list=[]
			},
			customFn(){
				this.queryData={
					receiptType:'',
					warehousingTime:'',
					warehousingNo:''
				}
				this.list=[]
				this.searchShow=false
				this.initData()
			},
			inputSearchBtn(val){
				if(!this.queryData.warehousingNo){
				  this.list=[]
				  return false
				}
				this.initData()
				let idx = this.historyList.findIndex((item) => item === val);
				 console.log(this.historyList);
				if (idx !== -1) {
				  this.historyList.splice(idx, 1);
				}
				this.historyList.unshift(this.queryData.warehousingNo)
			},
			// 删除全部历史记录
			delFn(){
				this.historyList=[]
			},
			// 单个删除历史记录
			closeFn(item,index){
				 console.log(item,index);
				 this.historyList.splice(index, 1)
				 console.log(this.historyList);
			},
			historyBtn(item,index){
				this.queryData.warehousingNo=item
				this.close1=false
				this.historyList.splice(index, 1);
				this.inputSearchBtn()
			},
			// 获取入库类型 
			getReceiptType(){
				let newArr=[]
				getDicts('biz_receipt_type').then(response=>{
					this.receiptTypeOption=response.data
					newArr=response.data.map(item=>{
						return {text:item.dictLabel,value:item.dictValue}
					})
					this.option=this.option.concat(newArr)
				})
			},
			getVaule(arr,item){
				for(var i=0;i<arr.length;i++){
					if(item== arr[i].dictValue){
						return arr[i].dictLabel
					}
				}
			},
			addBtn(){
				// 判断有没有权限
				if(this.permissions.includes('*:*:*')  || this.permissions.includes('module:receiptOorder:add')){
					uni.redirectTo({
						url:"/pages/receiptorder/addReceiptorder/index"
					})
				}else{
					this.$refs.uToast.show({
					   type:'default',
					   message:'您没有权限新增机器采购入库订单！'
					})
				}
			},
			// 删除
			async delBtn(e){
				console.log(e.name);
			 const res=	await delOrder(e.name)
			 if(res.code==200){
				 this.$refs.uToast.show({
				    type:'success',
				    message:'删除成功！'
				 })
			 }
			},
			// 跳转详情
			detailsBtn(item){
				uni.redirectTo({
					url:'/pages/receiptorder/details/index?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			changeFn(e){
				console.log(e);
				this.queryData.receiptType=e.value
				this.initData()
				
			},
			// 关闭右边筛选框
			closeBtn(){
				this.show=false
			},
			confirmFn(e){
				this.queryData.warehousingTime=this.getTime(e.value)
				this.warehouseShow=false
			},
			//时间格式化
			getTime(val){
				var date = new Date(val);
				var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
				var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
				var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
				//修改月份格式
				if (month >= 1 && month <= 9) {
				  month = "0" + month;
				}
				//修改日期格式
				if (day >= 0 && day <= 9) {
				  day = "0" + day;
				}
				var currentFormatDate = `${year}-${month}-${day}`;
				return currentFormatDate
			},
			BtnOk(){
				this.list=[]
				this.initData()
				this.queryData={}
				this.show=false
			},

			
		}
	}
</script>

<style lang="scss" >
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
			margin: 200px 0;
	}
	// 下拉选择框
	.demo-uni-row {
		margin-bottom: 10px;
			// position: fixed;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
			
			.title{
				height:48px;
				line-height: 48px;
				background-color: #ffffff;
				text-align: center;
				font-size: 16px;
			}
	}
	.receiptorder{
		padding: 10px;
		border: solid 1px #c3c3c3;
		background-color: #fff;
		.title{
			display: flex;
			justify-content: space-between;
			.title-left{
				font-size: 14px;
				font-weight: 600;
			}
			.title-right{
				font-size: 13px;
				color:#fd9540;
			}
		}
		.desc{
			font-size: 12px;
		}
	}
	.popBox{
		position: relative;
		.button{
			width: 100%;
			position: absolute;
			bottom: 0;
			.bit{
				width: 100%;
				height: 40px;
				text-align: center;
				padding-top: 10px;
				border-top: solid 1px #c3c3c3;
				
			}
		}
	}
	// 搜索框历史记录
	.history{
		width: 100%;
		min-height: 50px;
		background-color: #fff;
		padding: 0px 10px 10px 5px;
		
		span{
			display: inline-block;
			min-width: 35px;
			height:22px;
			line-height: 22px;
			// background-color: red;
			text-align: center;
			margin: 5px;
		}
	}
</style>